<template>
  <div class="headlines">
    <div style="background: white;padding: 5px;">
      <div class="options">
        <div style="padding: 5px">经营异常报告</div>
        <div>
          <el-input v-model="pevent" size="mini" style="width: 168px;margin-right: 5px;" />
          <el-button type="primary" size="mini" @click="headlines">搜索</el-button>
        </div>
      </div>
      <jc-table
        serial
        :table-data="tableData"
        :table-header="tableHeader"
        table-height="300px"
        @clickRow="headlineDetail"
      />
      <div style="margin-top: 5px;">
        <jc-pagination
          :total="total"
          :page.sync="pageNum"
          :limit.sync="pageSize"
          @pagination="headlines"
        />
      </div>
    </div>
    <div style="background: white;padding: 5px;margin-top: 10px;">
      <div class="options">
        <div class="options_1">
          供应商分析报表
          <el-button size="mini" @click="supAnaly=true">详情</el-button>
          <filtration
            :condition="1"
            ftype="gysfx"
            :table-header="tableHeader1"
            :detail-header="tableHeader1"
            @seachData="yearIncome1"
          />
        </div>
        <div style="display: flex">
          <el-date-picker
            v-model="value1"
            type="daterange"
            align="right"
            size="mini"
            unlink-panels
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            style="width: 268px;margin-right: 5px;"
          />
          <el-input v-model="khddh1" size="mini" style="width: 168px;margin-right: 5px;" placeholder="客户订单号" />
          <el-input v-model="fbillno1" size="mini" style="width: 168px;margin-right: 5px;" placeholder="采购入库单号" />
          <el-button size="mini" type="primary" @click="yearIncome1">搜索</el-button>
        </div>
      </div>
      <jc-table
        serial
        :table-data="tableData1"
        :table-header="tableHeader1"
        table-height="300px"
      />
      <div style="margin-top: 5px;">
        <jc-pagination
          :total="total1"
          :page.sync="pageNum1"
          :limit.sync="pageSize1"
          @pagination="yearIncome"
        />
      </div>
    </div>
    <div class="revenue">
      <div class="options">
        <div class="options_1">
          价目表异动报表
          <el-button size="mini" @click="priceExceVis=true">详情</el-button>
          <filtration
            :condition="1"
            ftype="jmbyd"
            :table-header="tableHeader4"
            :detail-header="tableHeader4"
            @seachData="yearAssets4"
          />
        </div>
        <div style="display: flex">
          <el-date-picker
            v-model="value4"
            type="daterange"
            align="right"
            size="mini"
            unlink-panels
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            style="width: 268px;margin: 0 5px;"
          />
          <el-input v-model="fname4" size="mini" style="width: 168px;margin-right: 5px;" placeholder="物料名称" />
          <el-input v-model="fnumber4" size="mini" style="width: 168px;margin-right: 5px;" placeholder="物料编码" />
          <el-input v-model="fsupplier4" size="mini" style="width: 168px;margin-right: 5px;" placeholder="供应商名称" />
          <el-button type="primary" style="margin-left: 5px;" size="mini" @click="yearAssets4">{{ $t('btn.search') }}</el-button>
        </div>
      </div>
      <jc-table
        :table-data="tableData4"
        :table-header="tableHeader4"
        table-height="340px"
      />
      <div style="margin-top: 5px;">
        <jc-pagination
          :total="total4"
          :page.sync="pageNum4"
          :limit.sync="pageSize4"
          @pagination="yearAssets"
        />
      </div>
    </div>
    <div class="revenue">
      <div class="revenue-main">
        <div class="revenue-main-lef">
          <span class="revenue-title">
            采购分析报表
            <el-date-picker
              v-model="value2"
              type="daterange"
              align="right"
              size="mini"
              unlink-panels
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
              style="width: 268px;margin: 0 5px;"
            />
            <el-button style="margin-left: 5px;" size="mini" @click="monthIncome">{{ $t('btn.search') }}</el-button>
          </span>
          <jc-table
            :table-data="tableData2"
            :table-header="tableHeader2"
            table-height="350px"
          />
        </div>
        <div class="revenue-main-rig">
          <span class="revenue-title">
            采购降本排名
            <el-button style="margin-left: 5px;" size="mini" @click="monthIncome">{{ $t('btn.reload') }}</el-button>
          </span>
          <ranking :list-data="tableData2" />
        </div>
      </div>
    </div>
    <div style="background: white;padding: 5px;margin-top: 10px;">
      <div class="options">
        <div class="options_1">
          超领报表
          <el-button size="mini" @click="overCollVis=true">详情</el-button>
          <filtration
            :condition="1"
            ftype="clbb"
            :table-header="tableHeader5"
            :detail-header="tableHeader5"
            @seachData="headlines5"
          />
        </div>
        <div>
          <el-date-picker
            v-model="value3"
            type="daterange"
            align="right"
            size="mini"
            unlink-panels
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
          />
          <el-button class="btn" type="primary" size="mini" @click="headlines">搜索</el-button>
        </div>
      </div>
      <div>
        <jc-table
          serial
          :table-data="tableData5"
          :table-header="tableHeader5"
          table-height="300px"
        />
      </div>
      <div style="margin-top: 5px;">
        <jc-pagination
          :total="total5"
          :page.sync="pageNum5"
          :limit.sync="pageSize5"
          @pagination="headlines"
        />
      </div>
    </div>
    <supplierAnaly v-if="supAnaly" @client="supAnaly=false" />
    <priceExcept v-if="priceExceVis" @client="priceExceVis=false" />
    <overCollar v-if="overCollVis" @client="overCollVis=false" />
  </div>
</template>

<script>
import {
  queryOverCollar, querySupplierAnalysis,
  queryProcurementAnalysis, queryPriceListException
} from '@/api/homePage/product'
import picker from '@/components/Search/picker'
import ranking from '@/views/homePageNew/supplyChain/component/ranking'
import filtration from '@/components/filtration'
import searData from '@/components/Search/mixin'
export default {
  name: 'SupplyChain',
  components: {
    ranking,
    filtration,
    supplierAnaly: () => import('@/views/homePageNew/supplyChain/component/supplierAnaly'),
    priceExcept: () => import('@/views/homePageNew/supplyChain/component/priceExcept'),
    overCollar: () => import('@/views/homePageNew/supplyChain/component/overCollar')
  },
  mixins: [picker, searData],
  data() {
    return {
      supAnaly: false, // 供应商分析
      priceExceVis: false, // 价格异动
      overCollVis: false, // 超领报表
      total: 0,
      pageNum: 1,
      pageSize: 20,
      ftype: 2052,
      tableHeight: '350px',
      tableData: [],
      tableHeader: [
        { label: '异常日期', prop: '', width: '100px' },
        { label: '异常事项', prop: '', type: 'bill' },
        { label: '异常部门', prop: '', width: '200px' },
        { label: '部门负责人', prop: '', width: '200px' },
        { label: '操作', type: 'btn', width: '200px' }
      ],
      total1: 0,
      pageNum1: 1,
      pageSize1: 20,
      fbillno1: '',
      khddh1: '',
      value1: [],
      tableData1: [],
      tableHeader1: [
        { label: this.$t('market.suppliernumber'), prop: '供应商编码' },
        { label: this.$t('market.suppliername'), prop: '供应商' },
        { label: this.$t('market.amountOrder'), prop: '下单金额' },
        { label: this.$t('market.batchPurchase'), prop: '采购批次' },
        { label: this.$t('market.numberDelays'), prop: '延期次数' },
        { label: this.$t('market.daysDeferred'), prop: '延期天数' },
        { label: this.$t('market.paymentCycle'), prop: '付款周期' },
        { label: this.$t('market.amountPaid'), prop: '已付金额' },
        { label: this.$t('market.amountOutstand'), prop: '未付款金额' },
        { label: this.$t('market.amountDeferred'), prop: '延期金额' },
        { label: this.$t('market.daysDeferredOutstand'), prop: '延期未付天数' }
        // { label: this.$t('market.staff'), prop: '' }
      ],
      value2: [],
      tableData2: [], // 采购分析报表
      tableHeader2: [
        { label: this.$t('market.staff'), prop: 'buyer' },
        { label: this.$t('market.ccAmount'), prop: 'famount' },
        { label: this.$t('market.reduction'), prop: 'reduction' },
        { label: this.$t('market.newlydevSuppli'), prop: 'number' },
        { label: this.$t('market.batchPurchase'), prop: 'purchaseNumber' },
        { label: this.$t('market.numberDelays'), prop: 'delayNumber' },
        { label: this.$t('market.rankingPurchasing'), prop: 'orderby' }
      ],
      total4: 0,
      pageNum4: 1,
      pageSize4: 20,
      fnumber4: '',
      fname4: '',
      fsupplier4: '',
      value4: [],
      tableData4: [],
      tableHeader4: [
        { label: this.$t('market.priceChangesTime'), prop: 'fapproveDate' },
        { label: this.$t('market.fmaterial'), prop: 'fnumber' },
        { label: this.$t('market.fdescripTion'), prop: 'fspecificaTion', minWidth: '200' },
        { label: this.$t('market.suppliername'), prop: 'fsupplier' },
        { label: this.$t('market.beforeprice'), prop: 'fbeforeprice' },
        { label: this.$t('market.afterprice'), prop: 'fafterprice' },
        { label: this.$t('market.amountSum'), prop: 'famountSum' },
        { label: this.$t('market.reduction'), prop: 'reduction' },
        { label: this.$t('market.changePrice'), prop: 'fcreator' }
      ],
      total5: 0,
      pageNum5: 1,
      pageSize5: 20,
      value3: [],
      tableData5: [],
      tableHeader5: [
        { label: this.$t('market.overfulfil'), prop: 'fdate' },
        { label: this.$t('menu.marketManage'), prop: 'fsaleorderno' },
        { label: this.$t('menu.collect'), prop: 'fbillno' },
        { label: this.$t('market.overfulMater'), prop: 'fname' },
        { label: this.$t('market.model'), prop: 'fmodel' },
        { label: this.$t('shop.fnumber1'), prop: 'fnumber' },
        { label: this.$t('shop.fname2'), prop: 'fname' },
        { label: this.$t('shop.fspecificaTion'), prop: 'fspecification' },
        { label: this.$t('market.mustqty'), prop: 'fmustqty' },
        { label: this.$t('market.realqty'), prop: 'fpickedqty' },
        { label: this.$t('market.overfulqty'), prop: 'factualqty' },
        { label: this.$t('market.overfuldept'), prop: 'departmentName' },
        { label: this.$t('market.picker'), prop: 'fpickerUser' },
        { label: this.$t('market.sendingPeople'), prop: 'fapproverUser' }
      ]
    }
  },
  created() {
    this.jinnian() // 今年
    this.value2 = this.timers
    this.headlines() // 超领报表
    this.yearIncome() // 供应商分析报表
    this.monthIncome() // 采购分析报表
    this.yearAssets() // 价格异动
    this.value4 = this.timers
    this.oldTabHeader1 = this.tableHeader1
    this.oldTabHeader4 = this.tableHeader4
    this.oldTabHeader5 = this.tableHeader5
  },
  methods: {
    // 超领报表
    headlines() {
      const DATA = {
        pageSize: this.pageSize5,
        pageNum: this.pageNum5,
        startDate: this.value3?.[0],
        endDate: this.value3?.[1]
      }
      queryOverCollar(DATA).then(res => {
        if (res.code === 0) {
          this.tableData5 = res.data.list
          this.total5 = res.data.total
        }
      })
    },
    headlines5(ev) {
      this.pageNum5 = 1
      if (ev && ev.fname) {
        this.customHandle5(ev)
        this.headlines()
      } else {
        this.headlines()
      }
    },
    // 方案 -- 自定义列表
    customHandle5(ev) {
      this.tableHeaders2 = []
      if (ev.header && ev.header.length > 0) {
        ev.header.forEach(item => {
          this.tableHeader5.forEach(res => {
            if (res.label === item) {
              this.tableHeaders2.push(res)
            }
          })
        })
        this.tableHeader5 = this.tableHeaders2
      } else if (ev.fname === '筛选方案') {
        this.tableHeader5 = this.oldTabHeader5
      }
    },
    // 采购分析报表
    monthIncome() {
      const DATA = {
        startDate: this.value2?.[0],
        endDate: this.value2?.[1]
      }
      queryProcurementAnalysis(DATA).then(res => {
        if (res.code === 0) {
          this.tableData2 = res.data
          this.tableData2.map((res, index) => {
            if (Number(res.famount) > 0) {
              res.famount = Number(res.famount).toLocaleString()
            } else {
              res.famount = ''
            }
          })
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            type: 'warning'
          })
        }
      })
    },
    // 供应商分析报表
    yearIncome() {
      const DATA = {
        pageSize: this.pageSize1,
        pageNum: this.pageNum1,
        khddk: this.khddh1,
        fbillno: this.fbillno1,
        startDate: this.value1?.[0],
        endDate: this.value1?.[1]
      }
      querySupplierAnalysis(DATA).then(res => {
        if (res.code === 0) {
          this.tableData1 = res.data.list
          this.total1 = res.data.total
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            type: 'warning'
          })
        }
      })
    },
    yearIncome1(ev) {
      this.pageNum1 = 1
      if (ev && ev.fname) {
        this.customHandle1(ev)
        this.yearIncome()
      } else {
        this.yearIncome()
      }
    },
    // 方案 -- 自定义列表
    customHandle1(ev) {
      this.tableHeaders = []
      if (ev.header && ev.header.length > 0) {
        ev.header.forEach(item => {
          this.tableHeader1.forEach(res => {
            if (res.label === item) {
              this.tableHeaders.push(res)
            }
          })
        })
        this.tableHeader1 = this.tableHeaders
      } else if (ev.fname === '筛选方案') {
        this.tableHeader1 = this.oldTabHeader1
      }
    },
    // 价格异动
    yearAssets() {
      const DATA = {
        pageSize: this.pageSize4,
        pageNum: this.pageNum4,
        fsupplier: this.fsupplier4,
        fname: this.fname4,
        fnumber: this.fnumber4,
        startDate: this.value4?.[0],
        endDate: this.value4?.[1]
      }
      queryPriceListException(DATA).then(res => {
        if (res.code === 0) {
          this.tableData4 = res.data.list
          this.total4 = res.data.total
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            type: 'warning'
          })
        }
      })
    },
    yearAssets4(ev) {
      this.pageNum4 = 1
      if (ev && ev.fname) {
        this.customHandle4(ev)
        this.yearAssets()
      } else {
        this.yearAssets()
      }
    },
    // 方案 -- 自定义列表
    customHandle4(ev) {
      this.tableHeaders2 = []
      if (ev.header && ev.header.length > 0) {
        ev.header.forEach(item => {
          this.tableHeader4.forEach(res => {
            if (res.label === item) {
              this.tableHeaders2.push(res)
            }
          })
        })
        this.tableHeader4 = this.tableHeaders2
      } else if (ev.fname === '筛选方案') {
        this.tableHeader4 = this.oldTabHeader4
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.pagination-container {
  padding: 0 !important;
}
.headlines {
  margin-bottom: 10px;
}
.options {
  padding-bottom: 5px;
  display: flex;
  justify-content: space-between;
}
.btn {
  margin-left: 10px;
}
.shijian {
  max-height: 35px;
  &::v-deep p {
    margin: 0;
    padding: 0;
  }
  &::v-deep img {
    max-width: 50px;
    max-height: 30px;
  }
}
.options_1 {
  padding: 5px;
  display: flex;
  align-items: center;
}
.revenue {
  padding: 0 5px 15px;
  margin-top: 10px;
  display: flex;
  background-color: white;
  flex-direction: column;
  .options {
    padding: 5px;
  }
  &-title {
    height: 40px;
    display: flex;
    align-items: center;
    padding-left: 10px;
    position: relative;
    .btnTig {
      position: absolute;
      right: 0;
    }
  }
  &-main {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-flow: nowrap;
    .revenue-main-lef {
      width: 59.8%;
    }
    .revenue-main-rig {
      width: 39.8%;
    }
  }
}
.headetail {
  list-style: none;
  padding: 0;
  margin: 0;
  li {
    padding: 5px 0;
    span:nth-child(1) {
      font-size: 16px;
      font-weight: 600;
      margin-right: 10px;
    }
    h2 {
      text-align: center;
      margin: 0 0 10px;
      padding: 0;
    }
  }
}
</style>
